<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>展示所有图书页面</title>
        <script type="text/javascript" src="/ajax-day01/js/ajax.js"></script>
        <script type="text/javascript" src="/ajax-day01/js/vue-2.6.12.js"></script>
        <script type="text/javascript" src="/ajax-day01/js/vue-router-3.4.9.js"></script>
        <script type="text/javascript" src="/ajax-day01/js/qs-6.9.4.js"></script>
    </head>
    <body>
        <div id="app">
            <table align="center">
                <tr>
                    <td>
                        <router-link to="/book/show"><button>查询</button></router-link>
                        <router-link to="/book/insertBook"><button>添加</button></router-link>
                        <hr>
                        <router-view></router-view>
                    </td>
                </tr>
            </table>
        </div>
        <template id="book-table">
            <div>
            <table border="1" align="center">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>图书</th>
                    <th>作者</th>
                    <th>价格</th>
                    <th>库存</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="b in books" :key="b.bookId">
                    <td>{{b.bookId}}</td>
                    <td>{{b.bookName}}</td>
                    <td>{{b.author}}</td>
                    <td>{{b.price}}</td>
                    <td>{{b.stock}}</td>
                    <td>
                        <button @click="deleteBook(b.bookId)">删除</button>
                        <!-- 动态生成地址并拼接上查询参数-->
                        <router-link :to="{path:'/book/updateBook',query:{bookId:b.bookId}}"><button>更新</button></router-link>
                    </td>
                </tr>
                </tbody>
            </table>
            <table align="center">
                <tr>
                    <td>
                        <p>
                            <a href="" v-for="page in pages" :key="page" @click.prevent="handleAClick(page)">
                                <button style="margin: 0 0px">
                                    {{page}}
                                </button>
                            </a>
                        </p>
                    </td>
                </tr>
            </table>
            </div>
        </template>
        <!--添加商品界面-->
        <template id="add-form">
            <form action="" @submit.prevent="addBook">
                图书名: <input type="text" v-model="book.bookName"> <br>
                作者： <input type="text" v-model="book.author"> <br>
                价格: <input type="number" v-model="book.price"> <br>
                库存: <input type="number" v-model="book.stock"> <br>
                <input type="submit" value="添加">
            </form>
        </template>
        <template id="update-form">
            <form action="" @submit.prevent="updateBook">
                <input type="hidden" v-model="book.bookId">
                图书名: <input type="text" v-model="book.bookName"> <br>
                作者： <input type="text" v-model="book.author"> <br>
                价格: <input type="number" v-model="book.price"> <br>
                库存: <input type="number" v-model="book.stock"> <br>
                <input type="submit" value="更新">
            </form>
        </template>
        <script>
            //修改书籍
            const updateForm = {
                template:"#update-form",
                data(){
                    return{
                        book:{}
                    }
                },
                created() {
                    //更新页面一加载，立刻发起ajax请求
                    let url = "/ajax-day01/book/showOne";
                    //获取路由地址上的查询参数
                    let data = "book.bookId="+this.$route.query.bookId;
                    //let data = `book.bookId=${bookId}`;
                    console.log(data);
                    let type = "get";
                    myJax(url,data,type,result=>{
                        let o = JSON.parse(result);
                        this.book = o.book;
                    })
                },
                methods:{
                    updateBook(){
                        let url = "/ajax-day01/book/updateBook";
                        let data = Qs.stringify({book:this.book},{allowDots:true});
                        console.log(data);
                        let type = "post";
                        myJax(url,data,type,(result)=>{
                            let o = JSON.parse(result);
                            if(o.status == "success"){
                                alert("更新成功");
                                this.$router.push("/book/show");
                            }else{
                                alert("更新失败");
                            }
                        })
                    }
                }
            }
            //添加书籍
            const addForm = {
                template: "#add-form",
                data(){
                    return{
                        book:{}
                    }
                },
                methods: {
                    addBook(){
                        let url = "/ajax-day01/book/insertBook";
                        let data = Qs.stringify({book:this.book},{allowDots:true});
                        let type = "post";
                        myJax(url,data,type,(result)=>{
                            let o = JSON.parse(result);
                            if(o.status == "success"){
                                alert("添加成功");
                                this.$router.push("/book/show");
                            }else{
                                alert("添加失败");
                            }
                        })
                    }
                }
            }
            const bookTable = {
                template:"#book-table",
                data(){
                    return{
                        books:[],
                        pages:[]
                    }
                },
                created() {
                    this.handleAClick(1);
                },
                methods:{
                    //展示所有书籍
                    handleAClick(i){
                        let url = "/ajax-day01/book/show";
                        let data = "pageNum="+i+"&pageSize=3";
                        let type = "GET";
                        myJax(url, data, type, (result) => {
                           //将result字符串转化为js对象
                            let data = JSON.parse(result);
                            this.books = data.books;
                            this.pages = data.pages;
                        })
                    },
                    //删除书籍
                    deleteBook: function (bookId) {
                        let isDelete = confirm("确定删除吗？");
                        if(!isDelete){
                            return;
                        }
                        let url = "/ajax-day01/book/deleteBook";
                        let data = `book.bookId=${bookId}`;
                        console.log(data);
                        let type = "post";
                        myJax(url,data,type,(result)=>{
                            let o = JSON.parse(result);
                            if (o.status == "success"){
                                alert("删除成功");
                                this.handleAClick(1);
                            }else{
                                alert("删除失败");
                            }
                        })
                    }

                }
            }
            //定义路由规则
            const router = new VueRouter({
                routes:[
                    {path:"/book/show", component:bookTable},
                    {path:"/book/insertBook", component: addForm},
                    {path: "/book/updateBook", component: updateForm}
                ]
            })
            const vm = new Vue({
                el:"#app",
                router
            })
        </script>
    </body>
</html>